<template>
  <div class="header">
    <el-button
      type="plain"
      size="large"
      id="btn_back"
      @click="toBackPage">返回</el-button>
    <div class="thread" style="margin-left: 15%; margin-top: 3%;"></div>
    <div class="thread" style="margin-left: 55%; margin-top: 3%;"></div>
    <span class="title">个人中心</span>
    <div class="thread" style="margin-left: 15%; margin-top: 3.5%;"></div>
    <div class="thread" style="margin-left: 55%; margin-top: 3.5%;"></div>
  </div>

  <div class="synopsis">
    <!-- <el-image :src="require('@/assets/12.jpg')" class="avatar"></el-image> -->
    <el-image :src="avatar" class="avatar"></el-image>
    <span class="username">{{userData.name}}</span>
    <div class="signatureContent">{{userData.selfDescription? userData.selfDescription : "这个人很懒，什么都没有留下"}}</div>
  </div>
  
  <div class="thread2" style="margin-left: 30%; margin-top: 7%;"></div>
  <div class="thread3" style="margin-left: 42%; margin-top: 3%;"></div>
  <div class="thread3" style="margin-left: 57%; margin-top: 3%; height: 60px"></div>
  <!-- <div class="thread3" style="margin-left: 64%; margin-top: 3%;"></div> -->
  <div class="personalInfo">
    <el-button
        type="primary"
        size="medium"
        id="btn"
        style="margin-top: 13%"
        @click="dialogVisible = true"
        >发布便签</el-button>

    <el-button
        type="primary"
        size="medium"
        id="btn"
        style="margin-top: 13%; margin-left: 5%;"
        @click="modifyFormInitial"
        >修改信息</el-button>
    
    <div class="circle1"></div>
    <span class="sex">{{userData.sex}}</span>

    <div class="circle2"></div>
    <span class="age">{{userData.age}}岁</span>

    <div class="circle3"></div>
    <span class="constellation">{{userData.constellation}}</span>

    <div class="circle4"></div>
    <span class="specialty">{{userData.major}}</span>

    <div class="circle5"></div>
    <span class="hobby">{{userData.hobbies}}</span>
  </div>

  <swiper :options="swiperOption" class="flex flex-row flex-wrap" style="z-index: 0">
    <swiper-slide v-for="(item, index) in scriptData" :key="item">
      <div class="script" @mouseenter="mouseenter(index + 1)" @mouseleave="mouseout(index + 1)">
        <div class="imageLargeStandard" :id="'imageLarge' + (index + 1)"><el-image :src="require('@/assets/tag/tag0.png')"></el-image></div>
        <div :id="'b-wrapper' + (index + 1)"></div>
        <div :id="'wrapper' + (index + 1)" @click="mouseclick(item)">{{item.title}}</div>
        <!-- <div style="width: 200px; height: 180px; background-color: rgba(0, 0, 0, 0.7); position: absolute; top: 0%;" v-if="blackOver"></div> -->
      </div>
    </swiper-slide>
    <template #button-prev>
      <div class="swiper-button-prev" style="top: 45%"></div>
    </template>
    <template #button-next>  
      <div class="swiper-button-next" style="top: 45%" @click="getNextNote"></div>
    </template>
    <template #pagination>  
      <div class="swiper-pagination"></div>
    </template>
  </swiper>

  <div class="black_overlay" v-if="blackOver">
    <div style="position: relative">
      <el-icon class="closeIcon" :size="30" @click="mouseclose()"><Close /></el-icon>
      <el-image :src="blackData.icon" class="imageBlack"></el-image>
    </div>
    <div class="blackText">&nbsp;&nbsp;&nbsp;&nbsp;{{blackData.content}}</div>
  </div>
  
  <!--发布便签-->
  <el-dialog v-model="dialogVisible" title="发布便签" width="40%" style="margin-top: 2%"> 
    <el-form label-width="100px" :model="scriptForm" :rules="rules">
        <span style="margin-right: 82.5%;">上传图片</span>
        <el-upload
           style="margin-right: 38%; margin-bottom: 4%;"
           action="#"
           ref="upload"
           list-type="picture-card"
           accept="image/jpeg,image/gif,image/png,image/jpg"
           :show-file-list="false"
           :http-request="uploadPhotoHttpRequest1">
           <el-icon v-if="!modifyPictureUrl"><Plus /></el-icon>
           <img :src="modifyPictureUrl"/>
        </el-upload>
        <el-form-item label="便签类型：" prop="columnId">
            <el-select v-model="scriptForm.columnId" style="width: 50%">
               <el-option label="运动" :value="0"></el-option>
               <el-option label="恋爱" :value="1"></el-option>
               <el-option label="游戏" :value="2"></el-option>
               <el-option label="学习" :value="3"></el-option>
               <el-option label="竞赛" :value="4"></el-option>
               <el-option label="约饭" :value="5"></el-option>
               <el-option label="奇思妙想" :value="6"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="最后期限：" prop="deadline">
            <el-date-picker
               style="width: 50%"
               v-model="scriptForm.deadline"
               type="datetime"
               value-format="YYYY-MM-DD hh:mm:ss"
               placeholder="请选择日期时间"/>
        </el-form-item>
        <el-form-item label="期望人数：" prop="exceptedNumbers">
            <el-input v-model="scriptForm.exceptedNumbers" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="标题：" prop="title">
            <el-input v-model="scriptForm.title" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="正文：">
            <el-input v-model="scriptForm.content" type="textarea"></el-input>
        </el-form-item>
        <el-button type="primary" size="medium" id="btn" @click="postNote">发布</el-button>
    </el-form>
  </el-dialog>

  <!--修改个人信息-->
  <el-dialog v-model="userDialogVisible" title="修改个人信息" width="40%" style="margin-top: 2%"> 
    <el-form label-width="100px">
        <span style="margin-right: 82.5%;">上传头像</span>
        <el-upload
           style="margin-right: 38%; margin-bottom: 4%;"
           class="avatar-uploader"
           action="#"
           ref="upload"
           list-type="picture-card"
           :show-file-list="false"
           accept="image/jpeg,image/gif,image/png,image/jpg"
           :http-request="uploadPhotoHttpRequest">
           <el-icon v-if="!modifyAvatarUrl"><Plus /></el-icon>
           <img :src="modifyAvatarUrl"/>
        </el-upload>
        <el-form-item label="性别：">
            <el-radio-group v-model="modifyForm.sex" style="width: 50%">
              <el-radio label="男" size="large">男</el-radio>
              <el-radio label="女" size="large">女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="用户名：">
            <el-input v-model="modifyForm.name" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="生日：">
            <el-date-picker
               v-model="modifyForm.birthday"
               type="date"
               style="width: 50%"
               placeholder="请选择日期"
               format="YYYY-MM-DD"
               value-format="YYYY-MM-DD"
               size="medium"/>
        </el-form-item>
        <el-form-item label="爱好：">
            <el-input v-model="modifyForm.hobbies" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="专业：">
            <el-input v-model="modifyForm.major" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="个性签名：">
            <el-input v-model="modifyForm.selfDescription" type="textarea"></el-input>
        </el-form-item>
        <el-button type="primary" size="medium" id="btn" @click="modifyUser">修改信息</el-button>
    </el-form>
  </el-dialog>
</template>

<script>
import scriptAPI from "@/api/scriptAPI";
import loginAPI from "@/api/loginAPI";
import commonAPI from "@/api/commonAPI";
export default {
    data(){
        return{

            dialogVisible: false,

            userDialogVisible: false,

            scriptForm:{
                title: "",
                content: "",
                image: "",
                time: "",
                columnId: "",
                exceptedNumbers: "",
                deadline: ""
            },
          rules:{

            columnId:[
              {required:true, message:'请选择便签类型',trigger:'change'}
            ],
            deadline:[
              {required:true,message:"请选择便签期限",trigger:'change'}
            ],
            exceptedNumbers:[
              {required:true,message:'请输入期望人数',trigger:'blur'}
            ],
            title:[
              {required:true,message:"请输入便签标题",trigger:"blur"}
            ]
          },
            blackOver: false,

            swiperOption: {
                loop: false, //首尾循环
                slidesPerView: 5, //页面中的板块数量

                autoplay: false,

                freeMode: false, //true:拖到哪就是哪
                spaceBetween: 0, //板块间隔
                grabCursor: true, //true：鼠标为抓手

                 // 显示分页
                pagination: {
                  el: ".swiper-pagination",
                  clickable: true, //允许分页点击跳转
                },

                // 设置点击箭头
                navigation: {
                  nextEl: ".swiper-button-next",
                  prevEl: ".swiper-button-prev",
                },
            },

            scriptData: [],

            blackData: {},

            userData: {},

            avatar: this.$store.getters["user/getUserAvatar"],

            modifyForm: {
              id: "",
              name: "",
              password: "",
              icon: "",
              sex: "",
              birthday: "",
              hobbies: "",
              major: "",
              selfDescription: ""
            },

            modifyAvatar: "",

            userId: "",

            modifyAvatarUrl: "",

            modifyPicture: "",

            modifyPictureUrl: "",
        }
    },

    created(){
      this.userId = this.$route.query.userId;
      console.log(this.userId);
      this.getUserNote(0, 6);
      this.getUserInfo();
    },

    methods:{

      async getUserAvatar(icon){
        await commonAPI.download(icon).then(res =>{
          let binaryData = [];
          binaryData.push(res);
          this.avatar = window.URL.createObjectURL(new Blob(binaryData));
        })
      },

      mouseenter(index){
        if(!this.blackOver){
          let elName = "wrapper" + index;
          let el2Name = "b-wrapper" + index;
          let el3Name = "imageLarge" + index;
          let el = document.getElementById(elName);
          console.log(el)
          el.classList.add("wrapper1");
          let el2 = document.getElementById(el2Name);
          el2.classList.add("b-wrapper")
          let el3 = document.getElementById(el3Name);
          el3.classList.remove("imageLargeStandard")
          el3.classList.add("imageLarge")
        }
      },

      mouseout(index){
        if(!this.blackOver){
          let elName = "wrapper" + index;
          let el2Name = "b-wrapper" + index;
          let el3Name = "imageLarge" + index;
          let el = document.getElementById(elName);
          el.classList.remove("wrapper1");
          let el2 = document.getElementById(el2Name);
          el2.classList.remove("b-wrapper")
          let el3 = document.getElementById(el3Name);
          el3.classList.add("imageLargeStandard")
          el3.classList.remove("imageLarge")
        }
      },
      
      mouseclick(item){
        this.blackOver = true;
        this.blackData = item;
        console.log(item)
        this.getScriptInfo(item.id)
      },

      async getScriptInfo(id){
        console.log(id)
        await scriptAPI.getScriptInfo(id).then(res=>{
          console.log(res)
          this.blackData.content = res.data.content
          this.download(res.data.pictures)
        })
      },

      modifyFormInitial(){
        this.userDialogVisible = true;
        this.modifyForm.sex = this.userData.sex;
        this.modifyForm.name = this.userData.name;
        this.modifyForm.selfDescription = this.userData.selfDescription;
        this.modifyForm.major = this.userData.major;
        this.modifyForm.hobbies = this.userData.hobbies;
        this.modifyAvatarUrl = this.avatar;
        this.modifyAvatar =  "";
      },

      uploadInitial(){
        this.dialogVisible = true;
        let data = {
                title: "",
                content: "",
                image: "",
                time: "",
                columnId: "",
                exceptedNumbers: "",
                deadline: ""
            };
        this.scriptForm = data;
        this.modifyPictureUrl = "";
        this.modifyPicture = "";
      },

      mouseclose(){
        this.blackOver = false;
      },
      toBackPage(){
        this.$router.go(-1)
      },

      async postNote(){
        let data = {
          columnId: this.scriptForm.columnId,
          title: this.scriptForm.title,
          content: this.scriptForm.content,
          exceptedNumbers: this.scriptForm.exceptedNumbers,
          pictures: this.modifyPicture,
          timeLimited: this.scriptForm.deadline? 1 : 0,
          deadline: this.scriptForm.deadline
        }
        console.log(data)
        await scriptAPI.postNote(data).then(res=>{
          console.log(res)
          this.scriptData = [];
          this.getUserNote(0, 6);
          this.$message.success("发布成功");
          this.dialogVisible = false;
        })
      },

      async getUserNote(startIndex, size){
        await scriptAPI.getUserNote(this.userId, startIndex, size).then(res=>{
          this.scriptData.push.apply(this.scriptData, res.data)
        })
        console.log(this.scriptData)
      },

      getNextNote(){
        let startIndex = this.scriptData.length;
        this.getUserNote(startIndex, 1);
      },

      async getUserInfo(){
        await loginAPI.getUserInfo(this.userId).then(res=>{
          this.userData = res.data;
          let date = this.userData.birthday.split("-");
          let year = Number(date[0]);
          let month = Number(date[1]);
          let day = Number(date[2]);
          this.userData.constellation = this.calculateUserConstellation(month, day);
          this.userData.age = this.calculateUserAge(year, month, day);
          this.getUserAvatar(res.data.icon)
        })
      },

      /**
       * @description 计算星座
       */
      calculateUserConstellation(month, day){
        var xingzuo = ["魔羯座","水瓶座", "双鱼座", "牡羊座", "金牛座", "双子座", "巨蟹座", "狮子座", "处女座", "天秤座", "天蝎座", "射手座", "魔羯座"];   
			    	var month22 = [22, 20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22];  // 两个星座分割日
			        var index = month;
			        // 所查询日期在分割日之前，索引-1，否则不变
			        if (day < month22[month - 1]) {
			                index = index - 1;
			        }
			        // 返回索引指向的星座string
			        return xingzuo[index];
      },

      /**
       * @description 计算年龄
       */
      calculateUserAge(year, month, day){
        let now = new Date();
        let yearNow = now.getFullYear();
        let monthNow = now.getMonth() + 1;
        let dayNow = now.getDate();
        if(monthNow === month){
          if(dayNow >= day){
            return yearNow - year;
          }
          else{
            return yearNow - year - 1
          }
        }
        else if(monthNow > month){
          return yearNow - year;
        }
        else{
          return yearNow - year - 1;
        }
      },


      async download(icon){
        console.log(icon)
        await commonAPI.download(icon).then(res =>{
          let binaryData = [];
          binaryData.push(res);
          this.blackData.icon = window.URL.createObjectURL(new Blob(binaryData))
          console.log(this.blackData.icon)
        })
      },

      async modifyUser(){
        let data = {
          id: this.userData.id,
          name: this.modifyForm.name,
          sex: this.modifyForm.sex,
          birthday: this.modifyForm.birthday,
          hobbies: this.modifyForm.hobbies,
          major: this.modifyForm.major,
          selfDescription: this.modifyForm.selfDescription,
          icon: this.modifyAvatar
        }
        await loginAPI.modifyUser(data).then(res =>{
          console.log(res)
          this.getUserInfo();
          this.userDialogVisible = false;
          this.$message.success("修改成功")
        })
      },

      /**
       * @description 上传头像
       */
      uploadPhotoHttpRequest(fileInfo) {
         const isLt2M = fileInfo.file.size / 1024 / 1024 < 1;
         if(isLt2M){
            this.uploadPhoto(fileInfo.file);
          }
      },

       async uploadPhoto(file) {
         console.log(file)
         this.modifyAvatarUrl = window.URL.createObjectURL(file)
         let formData = new FormData();
         formData.append("file", file)
         console.log(formData)
         await commonAPI.upload(formData).then(res =>{
           console.log(res)
           this.modifyAvatar = res.data;
         })
      },

      /**
       * @description 上传便签图片
       */
       uploadPhotoHttpRequest1(fileInfo) {
         const isLt2M = fileInfo.file.size / 1024 / 1024 < 1;
         if(isLt2M){
            this.uploadPhoto1(fileInfo.file);
          }
      },

       async uploadPhoto1(file) {
         console.log(file)
         let formData = new FormData();
         formData.append("file", file)
         this.modifyPictureUrl = window.URL.createObjectURL(file);
         console.log(formData)
         await commonAPI.upload(formData).then(res =>{
           console.log(res)
           this.modifyPicture = res.data;
           console.log(this.modifyPicture)
         })
      },
    }
}
</script>

<style scoped>
.title{
    position: absolute;
    left: 46.5%;
    top: 4.1%;
    font-family: 'FangSong';
    font: bold;
    font-size: 25px;
}
.header{
    background-image: url("@/assets/BG.png");
    background-size: 100% 100%;
    height: 100px;
}
.thread{
    position: absolute;
    width: 30%;
    height: 1px;
    border-top: solid #ACC0D8 1px;
}
.thread2{
    position: absolute;
    width: 40%;
    height: 1px;
    border-top: solid #ACC0D8 0.5px;
}
.thread3{
    position: absolute;
    width: 1px;
    height: 120px;
    border-right: solid #ACC0D8 0.5px;
}
.synopsis{
    background-image: url("@/assets/Colorfull Bg.png");
    background-size: 100% 100%;
    height: 230px; 
    display: flex;
    flex-direction: column;
    justify-items: center;
}
.avatar{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    margin-left: 46.5%;
    margin-top: 1%;
}
.username{
    color: #ffffff;
    font-weight: bold;
    margin-right: 0.5%;
    margin-top: 0.5%;
}
.signatureContent{
    height: 60px;
    width: 300px;
    margin-top: 1%;
    margin-left: 40%;
    color: #ffffff;
    font-weight: lighter;
    font-family: 'STXingkai';
    word-break: break-all;
}
.personalInfo{
    background-image: url("@/assets/Bg 2.png");
    background-size: 100% 100%;
    margin-bottom: 2%;
    height: 270px; 
}
.note{
    position: relative;
    margin-left: 5.5%;
    margin-bottom: 2%;
    width: 200px;
    height: 180px;
}
#btn {
  background-color: #095c91;
  background-image: linear-gradient(90deg, #095c91 0%, #0393a3 74%);
  border-radius: 20px;
  border: 0.2px solid #315a7491;
  color: #e9e9e9;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  padding: 0.9rem 4rem;
  text-transform: uppercase;
  transition: transform 80ms ease-in;
  margin: auto;
  margin-top: 20px;
}

#btn:active {
  transform: scale(0.8);
}

#btn:focus {
  outline: none;
}
#btn_back{
  position: absolute;
  font-size: large;
  font-family: 'KaiTi';
  left: 2%;
  top: 3%;
}
.circle1{
    position: absolute;
    left: 31%;
    top: 52%;
    height: 40px;
    width: 40px;
    background-image: url("@/assets/sex.png ");
    background-size: 100% 100%;
}
.sex{
    position: absolute;
    left: 35%;
    top: 53%;
    font-size: 25px;
    color: #000000;
    font-weight: lighter;
    font-family: 'STXingkai';
}
.circle2{
    position: absolute;
    left: 43%;
    top: 52%;
    height: 40px;
    width: 40px;
    background-image: url("@/assets/age.png ");
    background-size: 100% 100%;
}
.age{
    position: absolute;
    left: 47%;
    top: 53%;
    font-size: 25px;
    color: #000000;
    font-weight: lighter;
    font-family: 'STXingkai';
}
.circle3{
    position: absolute;
    left: 58%;
    top: 52%;
    height: 40px;
    width: 40px;
    background-image: url("@/assets/constellation.png ");
    background-size: 100% 100%;
}
.constellation{
    position: absolute;
    left: 62%;
    top: 53%;
    font-size: 25px;
    color: #000000;
    font-weight: lighter;
    font-family: 'STXingkai';
}
.circle4{
    position: absolute;
    left: 31%;
    top: 62%;
    height: 40px;
    width: 40px;
    background-image: url("@/assets/specialty.png ");
    background-size: 100% 100%;
}
.specialty{
    position: absolute;
    left: 35%;
    top: 63%;
    font-size: 25px;
    color: #000000;
    font-weight: lighter;
    font-family: 'STXingkai';
}
.circle5{
    position: absolute;
    left: 43%;
    top: 62%;
    height: 40px;
    width: 40px;
    background-image: url("@/assets/hobby.png ");
    background-size: 100% 100%;
}
.hobby{
    position: absolute;
    left: 47%;
    top: 63%;
    font-size: 25px;
    color: #000000;
    font-weight: lighter;
    font-family: 'STXingkai';
}
.circle6{
    position: absolute;
    left: 58%;
    top: 62%;
    height: 40px;
    width: 40px;
    background-image: url("@/assets/home.png ");
    background-size: 100% 100%;
}
.home{
    position: absolute;
    left: 62%;
    top: 63%;
    font-size: 25px;
    color: #000000;
    font-weight: lighter;
    font-family: 'STXingkai';
}

.script{
  width: 200px;
  height: 180px;
  margin-left: 14%;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

.imageLargeStandard{
  width: 200px;
  height: 180px;
}

.imageLarge{
  width: 200px;
  height: 180px;
  animation-timing-function: linear;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  transform: scale(1);
  animation-name: image2;
}

@keyframes image2 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}

.b-wrapper{
  position: absolute;
  left: 0%;
  bottom: 0%;
  right: 0%;
  top: 0%;
  transform: scale(0);
  background-color: #000000;
  opacity: 0.5;
  animation-timing-function: linear;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: b-wrapperLarge;
}
@keyframes b-wrapperLarge {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.wrapper1{
  font-size: 2em;
  color: #fff;
  text-align: center;
  position: absolute;
  font-family: "FangSong";
  font-weight: lighter;
  padding: 30% 0;
  left: 0%;
  bottom: 0%;
  right: 0%;
  top: 0%;
  font-weight: 300;
  transform: scale(0);
  animation-timing-function: linear;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: wrapperLarge;
}

@keyframes wrapperLarge {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
.wrapper:hover{
  transform: scale(1);
  transition: all 2s;
}

.black_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.imageBlack{
  width: 350px;
  height: 280px;
  margin-top: 3%;
  border: #eae9e7 solid 5px;
  border-radius: 10px ;
}
.closeIcon{
  position: absolute;
  color: #fff;
  left: 63%;
  top: 5%;
}
.closeIcon:hover{
  transform: scale(1.4);
}
.blackText{
  color: #fff;
  font-weight: lighter; 
  letter-spacing: 2px; 
  font-size: 22px; 
  width: 680px; 
  word-break: break-all; 
  margin: auto; 
  margin-top: 3%;
  text-align: left;
  font-family: "KaiTi";
  font-weight: lighter;
  z-index: 2;
}
</style>